<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        v-waves
        icon="el-icon-refresh"
        @click="handleFilter"
      >刷新</el-button>
    </div>
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border=""
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="exportType" align="center" label="导出类型" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.exportType}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" align="center" label="文件名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.fileName}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="status" align="center" label="导出状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statustagFilter">{{scope.row.status|statusFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createTime|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120" class="small-padding">
        <template slot-scope="scope">
          <el-button
            type="primary"
            :disabled="scope.row.status!==5"
            size="mini"
            @click="exportFile(scope.row)"
          >下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
let statusFilter = ['未完成', '导出完成', '导出失败']
let statustagFilter = ['warning', 'success', 'danger', 'info']

export default {
  data () {
    return {
      tableHeight: 400,
      total: 0
    }
  },
  created () {
    // this.loadData();

    this.init('export_task', 1).loadData()

    this.tableHeight = window.innerHeight - 300
  },
  methods: {
    exportFile (row) {
      if (row.status === 5) {
        let url = row.filePath
        if (url && url[0] !== '/') {
          url = '/' + url
        }
        this.openWin(url)
      }
    }
  },
  filters: {
    statusFilter (status) {
      if (status === 0) {
        return statusFilter[parseInt(status)]
      } else if (status === 5) {
        return statusFilter[parseInt(1)]
      } else {
        return statusFilter[parseInt(2)]
      }
    },
    statustagFilter (status) {
      if (status === 0) {
        return statustagFilter[parseInt(status)]
      } else if (status === 5) {
        return statustagFilter[parseInt(1)]
      } else {
        return statustagFilter[parseInt(2)]
      }
    }
  }
}
</script>
